//获取操作对象
var box=document.querySelector('.container')
//获取cookie中的账号
var name1=getCookie('name')
//判断当前姓名是否存在
if(!name1){
    alert("尚未登录，请登录之后在进入")
    //获取当前网页的地址
    var url=location.href
    //跳转到指定网页，并传递参数
    location.href="./login.html?url1="+url
}

//获取localStorage中的cartlist1所对应的值
var cartlist1=localStorage.getItem('cartlist1') || "[]"
//转为数组对象
cartlist1=eval('('+cartlist1+')')
show()

function show(){
    //检查所有商品的is_select是否等于1
    var bool=cartlist1.every(item=>{
        return item.is_select==1
    })
    //判断当前数组中是否有元素
if(cartlist1.length>0){
    //拼接所有要显示的内容
    //头部内容
    var ss1=`
    <div class="panel panel-default" style="margin:0px;background-color: #ededed;border:0px">
        <div class="panel-heading" style="display: flex;justify-content: space-between;margin-bottom: 40px;border-radius: 5px;background-color: #ededed;border: 1px solid rgba(0,0,0,.14);background-color:#ffffff ;text-align:center;">   
           <span><input type="checkbox" name="quan" ${bool?"checked":''}>全选</span>
           <span>商品</span>
           <span style="width:20%">属性</span>
           <span>单价</span>
           <span>数量</span>
           <span>小计</span>
           <span>操作</span>
        </div>
       
    `
    //遍历每个商品对象
    for(var i=0;i<cartlist1.length;i++){
        //拼接中间商品
        ss1+=`
        <div class="media" style="border: 1px solid rgba(0,0,0,.14);border-radius: 5px;display: flex;justify-content: space-between;margin-top:0px;background-color:#ffffff ;margin-bottom:5px;width:100%;height:120px">

            <div class="media-left media-middle"style="width:20%;display:flex;justify-content: space-around;align-items:center;">
            <input  type="checkbox" id=${cartlist1[i].goods_id} name="xuan" ${cartlist1[i].is_select==1?"checked":''}>
            <a href="#" >
                <img class="media-object" src="${cartlist1[i].goods_small_logo}" width="100">
            </a>
            </div>

            <div class="media-body" style="width:75%;display:flex;justify-content: space-around;align-items:center;">
            <h4 class="media-heading" style="width:30%;font-size:16px">${cartlist1[i].goods_name}</h4>
            <h4 >${cartlist1[i].goods_price}</h4>
            
            <div><button type="button" class="btn btn-default" id=${cartlist1[i].goods_id} ${cartlist1[i].cart_number<=1?"disabled":''}>-</button>
            <button type="button" class="btn btn-default">${cartlist1[i].cart_number}</button>
            <button type="button" class="btn btn-default" id=${cartlist1[i].goods_id} ${cartlist1[i].cart_number>=cartlist1[i].goods_number?"disabled":''}>+</button>
            </div>
            <h4>
            ￥${(cartlist1[i].goods_price*cartlist1[i].cart_number).toFixed(2)}</h4>
            <button type="button" class="btn btn-primary" id=${cartlist1[i].goods_id}>删除</button>
            </div>
        </div>
        `
    }
    //拼接尾部
    ss1+=`
        </div>
    </div>
    <div class="panel-body" style="display: flex;justify-content: space-between;margin-top: 40px;border: 1px solid rgba(0,0,0,.14);border-radius: 5px;background-color: #ffffff;line-height:50px">
    <button type="button" class="btn btn-info btn11">清空购物车</button>
   
      <span> 商品种类：${cartlist1.length}</span>
      <span>所选商品数量：<span style="color:red"> ${total1()[0]}</span></span>
       <span>所选商品价格：<span style="color:red"> ￥${total1()[1]}</span></span>
       
      <button type="button" class="btn btn-primary btn11"style="width:100px;height:50px;background-color:#ff4b33;">去结算</button>
    </div>
    `
    box.style.backgroundColor = "#ededed";
    //把当前拼接好的内容渲染到box中
    box.innerHTML=ss1
}else{
    //拼接要显示的内容
    var str=`
    
    <div class="meiyou">
        <div style="height: 50px;border-bottom: 1px solid rgba(0,0,0,.14);font-weight: bolder;font-size: 24px;line-height: 50px;text-indent: 1em;">购物清单
        </div>
        <div style="text-align: center;">
            <img src="https://static.smartisanos.cn/index/assets/images/cart-empty.f25b2c8c8168313d570820fe359998c5.png" alt=""style="margin:50px auto;">
            <h5>您的购物车中还没有商品</h5>
                
                <a class="btn btn-primary btn-lg" href="./index1.html" role="button" style="background-color: #fdfdfd;color:black;width:150px;margin-bottom:50px;margin-top:10px;border:1px gray solid;">现在选购</a>
        </div>       
    </div>
    `
    //把拼接好的内容渲染到大盒子中
    box.innerHTML=str
}
}

//给box对象绑定点击事件
box.onclick=function(e){
    
    //事件对象兼容
    var e = e || window.event
    //目标对象兼容
    var target=e.target || e.srcElement
    //判断点击的是否为删除
    if(target.innerHTML=="删除"){
        //获取当前商品的id
        var id=target.getAttribute('id')
        //根据id值来删除当前商品
        cartlist1=cartlist1.filter((item)=>{
            //判断遍历出来的商品id是否等于当前获取的id值，如果不等于，则返回
            return item.goods_id!=id
        })
        //把当前数组重新存放在localStorage中
        localStorage.setItem('cartlist1',JSON.stringify(cartlist1))
        show()
    }
    //增加数量
    if(target.innerHTML=="+"){
        //获取当前商品的id
        var id=target.getAttribute('id')
        //遍历所有商品对象
        cartlist1.forEach(item=>{
            //判断遍历出来的商品中的id是否等于当前获取的id值
            if(item.goods_id==id){
                item.cart_number++
            }
        })
       // var qw=${cartlist1[i].goods_price}
        //把当前数组重新存放在localStorage中
        localStorage.setItem('cartlist1',JSON.stringify(cartlist1))

  
       
      show()
    }
    //减少数量
    if(target.innerHTML=='-'){
        //获取当前商品id
        var id=target.getAttribute('id')
        //遍历所有商品对象
        cartlist1.forEach(item=>{
            //判断遍历的商品id是否等于获取的id
            if(item.goods_id==id){
                item.cart_number--
            }
        })
        //把当前数组重新存放在localStorage中
        localStorage.setItem('cartlist1',JSON.stringify(cartlist1))
        show()
    }
    //判断点击的是否为全选框
    if(target.name=="quan"){
        //遍历所有的商品对象
        cartlist1.forEach(item=>{
            //判断当前全选框是否被选中
            if(target.checked){
                //把所有商品中的is_select字段的值改为1
                item.is_select=1
            }else{
                item.is_select=0
            }
        })
        //把当前数组重新存放在localStorage中
        localStorage.setItem('cartlist1',JSON.stringify(cartlist1))
        show()
    }
    //选中框对象
    if(target.name=="xuan"){
        //获取当前商品的id
        var id=target.getAttribute('id')
        //遍历数组对象
        cartlist1.forEach(item=>{
            //判断是否相等
            if(item.goods_id==id){
                //判断当前选中框是否被选中
                if(target.checked){
                    item.is_select=1
                }else{
                    item.is_select=0
                }
            }
        })
        //把当前数组重新存放在localStorage中
        localStorage.setItem('cartlist1',JSON.stringify(cartlist1))
        show()
    }
    //去结算
    if(target.innerHTML=="去结算"){
        if(confirm("您确定要购买以下商品吗？")){
            alert(`您已支付：￥${total1()[1]}`)
            //遍历数组元素
            cartlist1=cartlist1.filter(item=>{
                //返回is_select字段的值不等于1
                return item.is_select!=1
            })
            //把当前数组重新存放在localStorage中
            localStorage.setItem('cartlist1',JSON.stringify(cartlist1))
            show()
        }
    }
    //清空购物车
    if(target.innerHTML=="清空购物车"){
        cartlist1.length=0
        //把当前数组重新存放在localStorage中
        localStorage.setItem('cartlist1',JSON.stringify(cartlist1))
        show()
    }
  
}
//统计被选中的商品数量和价格
function total1(){
    var num=0 //所有被选中的商品数量
    var sum=0 //所有被选中的商品价格
    var sun=0
    var he=0
    //遍历数组对象
    cartlist1.forEach(item=>{
        //判断当前is_select是否等于1
        if(item.is_select==1){
            num=num+parseInt(item.cart_number)
            //统计所有被选中的商品总价
            sum+=parseInt(item.cart_number)*parseFloat(item.goods_price)
            sun=sum.toFixed(2)
        }
    })

    return [num,sun,]
}

